<template>
  <a-row class="selectedSuppliersBox w1200">
    <a-col :span="14" class="supplierBox">
      <supplier-display-header style="padding: 25px 20px;" title="精选供应商" @more="supplierMore"></supplier-display-header>
      <div class="supplierWrap">
        <div class="supplierItem" v-for="i in 4" :key="i">
          <a-row>
            <a-col :span="24">
              <div class="supplierItemTop">
                <img class="icon" src="@/assets/images/supplierDisplayCenter/icon6.png" />
                <div class="supplierName">
                  <div class="justflex">
                    <span>华为技术有限公司</span>
                    <div>
                      <img class="icon" src="@/assets/images/supplierDisplayCenter/icon4.png" />
                      <span>AAA+</span>
                    </div>
                  </div>
                  <div style="margin-top: 5px;">
                    <img class="icon" src="@/assets/images/supplierDisplayCenter/icon4.png" />
                    <span class="addr">泉州</span>
                  </div>
                </div>
              </div>
            </a-col>
            <!-- <a-col :span="4"></a-col> -->
          </a-row>
          <p class="mainType">
            主营：电子计算机软硬件、通讯网络、监控系统...
          </p>
          <div>
            <img class="icon" src="@/assets/images/supplierDisplayCenter/icon3.png" />
            <span class="mainColor" v-if="isLogin">10次</span>
            <span class="mainColor" v-else>***</span>
            <span>中标项目</span>
            <span class="divider">|</span>
            <span class="mainColor" v-if="isLogin">30W+</span>
            <span class="mainColor" v-else>***</span>

            <span>入围项目</span>

          </div>
          <div class="MT5">
            <img class="icon" src="@/assets/images/supplierDisplayCenter/icon2.png" />
            <span class="supplierSub">优质工厂服务周到</span>

          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="9" offset="1" class="activityBox">
      <supplier-display-header style="padding: 25px 20px;" title="热门活动" @more="activityMore"></supplier-display-header>
      <div class="activityWrap">
        <a-row style="text-align: right;">
          <a-radio-group button-style="solid" @change="radioChange" v-model="type">
            <a-radio-button value="1">展会</a-radio-button>
            <a-radio-button value="2">走进采购人</a-radio-button>
            <a-radio-button value="3">培训</a-radio-button>
            <a-radio-button value="4">招商</a-radio-button>
          </a-radio-group>
        </a-row>
        <div class="activityList">
          <div class="activetyItem" @click="toHotActivity(item)" v-for="(item,index) in hotActivity" :key="index">
            <div class="activetyItemLeft">
              <span>{{ item.status }}</span>
            </div>
            <div class="activetyItemRight">
              <div class="justflex">
                <span>{{ item.name }}</span>
                <div>
                  <img class="icon" src="@/assets/images/supplierDisplayCenter/icon4.png" />
                  <span class="addr">{{item.areaName}}</span>
                </div>
              </div>
              <div class="activityTime">
                {{ item.beginTime }} ~ {{ item.endTime}}
              </div>
            </div>
          </div>
        </div>
      </div>

    </a-col>
  </a-row>
</template>
      
<script>
import SupplierDisplayHeader from './SupplierDisplayHeader'
import storage from '@/utils/storage'
import { popularExhibitionsMallList } from '@/api/portal'

export default {
  name: 'selectedSuppliers',
  components: {
    SupplierDisplayHeader
  },
  data() {
    return {
      type: "1",
      hotActivity: [],
      isLogin: storage.session.get('isLogin') && storage.session.get('authToken'),

    }
  },

  mounted() {
    this.loadData()
  },
  methods: {
    toHotActivity(item){ 
      this.$router.push({ path: "hotActivityDetail", query: { id: item.id } });

    },
    supplierMore() {
      this.$router.push({ path: "supplierMorelist" });

    },
    activityMore() {
      this.$router.push({ path: "hotActivity" });

    },
    radioChange() {
      this.loadData()
    },
    loadData() {
      popularExhibitionsMallList({type:this.type}).then(res => {
        if(res.code == 0) {
          this.hotActivity = res.data
        }
      })
    }
  }
}
</script>
      
<style scoped lang="scss">
$mainColor: #3370FF;

/deep/ .ant-radio-button-wrapper {
  color: $mainColor;
}

.selectedSuppliersBox {
  margin-top: 20px !important;

}

.justflex {
  display: flex;
  justify-content: space-between;
}

.icon {
  vertical-align: middle;
}

span {
  vertical-align: middle;
}

.supplierBox {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 120, 254, 0.1);
  border-radius: 10px;
  height: 490px;
  .supplierWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px 0 20px;

    .supplierItem {
      height: 185px;
      border-radius: 8px;
      opacity: 1;
      width: 320px;
      padding: 16px;
      margin-bottom: 20px;
      /* 灰度/纯白 */
      background: #FFFFFF;
      box-sizing: border-box;
      /* 灰度/组件线框 */
      border: 0.5px solid #E2E2E2;
      /* 投影/投影S */
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);

      .supplierItemTop {
        display: flex;
      }

      .supplierName {
        padding: 5px 0 0 5px;
        flex: 1;

        h4 {
          margin-top: 8px;
          margin-bottom: 5px;
        }

        img {
          vertical-align: middle;
        }

        .addr {
          color: #909090;
          vertical-align: middle;

        }
      }
    }

    .mainType {
      color: #646464;
      font-size: 12px;
      padding: 12px 0;
    }

    .divider {
      margin-left: 5px;
      margin-right: 5px;
      color: #D8D8D8;
    }

    .supplierSub {
      font-size: 12px;
      color: #323232;
    }
  }
}
::-webkit-scrollbar {
    width:0;
    height:0;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.1);
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
.activityBox {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 120, 254, 0.1);
  border-radius: 10px;
  padding-bottom: 10px;
  .activityWrap {
    padding: 0 20px 10px 20px;

  }
  .activityList {
    margin-top: 20px;
    height: 346px;
    overflow-y: auto;
  }
  .activetyItem {
    display: flex;
    cursor: pointer;
    .activetyItemLeft {
      margin-right: 10px;
      span {
        background: rgba(0, 120, 254, 0.1);
        box-sizing: border-box;
        border: 1px solid rgba(0, 120, 254, 0.1);
        padding: 5px 10px;
        border-radius: 15px;
        color: #0078FE;
      }
    }
    .activetyItemRight {
      flex: 1;
    }
    .activityTime {
      color: #909090;
      font-size: 12px;
      margin-top: 8px;
    }
  }
}</style>
      